<template>
  <uni-popup ref="mergePopup" type="dialog" :mask-click="false">
    <view class="container align-center flex-col">
      <image class="img-close" src="@/static/login/guanbi.png" @click="close"></image>
      <view class="flex-col" style="margin-top: 60upx; margin-bottom: 54upx;">
        <text class="title" style="margin-bottom: 5upx;">
          检测到本机和云端
        </text>
        <text class="title">
          做题记录不一样
        </text>
      </view>
      <image class="synchronization" src="@/static/login/synchronization.png"></image>
      <text v-if="userSysInfo && userSysInfo.deviceModel" class="desc">云端同步来源：{{ userSysInfo.deviceModel }}</text>
      <text v-if="userSysInfo && userSysInfo.time" class="desc">同步时间：{{ userSysInfo.time }}</text>
      <view class="flex-row footer1">
        <view class="btn center" @click="mergeUser(1)">以本机为准</view>
        <view class="btn center btn-right" @click="mergeUser(0)">以云端为准</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import day from "@/vendor/day";

export default {
  data() {
    return {
      userSysInfo: null
    }
  },
  methods: {
    open(userSysInfo) {
      return new Promise((resolve, reject) => {
        this._resolve = resolve
        this._reject = reject
        this.userSysInfo = userSysInfo
        if (userSysInfo && userSysInfo.updatedAt) {
          this.userSysInfo.time = this.timeProcessing(userSysInfo.updatedAt)
        }
        this.$refs.mergePopup.open()
      })
    },
    close() {
      this._resolve = null
      if (this._reject) {
        this._reject()
        this._reject = null
      }

      this.$refs.mergePopup.close()
    },
    mergeUser(i) {
      this._reject = null

      if (this._resolve) {
        this._resolve(i)
        this._resolve = null
      }

      this.$refs.mergePopup.close()
    },
    timeProcessing(time) {
      return day(time).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  width: 578upx;
  background-color: #fff;
  border-radius: 24upx;

  .img-close {
    position: absolute;
    top: 48upx;
    right: 48upx;
    width: 26upx;
    height: 26upx;
  }

  .title {
    font-size: 36upx;
    color: #000;
  }

  .synchronization {
    margin-bottom: 30upx;
    width: 306upx;
    height: 126upx;
  }

  .desc {
    margin-top: 10upx;
    font-size: 26upx;
    color: #777777;
  }

  .footer1 {
    margin-top: 50upx;
    margin-bottom: 50upx;
  }

  .btn {
    width: 242upx;
    height: 80upx;
    border-radius: 40upx;
    background-color: #EDEDED;
    font-size: 30upx;
    color: #000000;
  }

  .btn-right {
    margin-left: 26upx;
    background-color: #3073F6;
    color: #FFFFFF;
  }
}
</style>
